<<<<<<< HEAD
<template>
    <div id="addAccount">
        <table>
            <br>
            <tr>
                <td>类别</td>
                <td><el-input v-model="typeName"></el-input></td>
            </tr>
            <br>
            <tr>
                <td></td>
                <td><el-button style="margin-left: 170px" type="primary" @click="insert()">新增</el-button></td>
            </tr>
        </table>
    </div>
</template>
<script>
import axios from 'axios';


export default {
    name: 'AddEmployee',
    data() {
        return {
            treeData: [],
            pageInfo: "",
            defaultProps: {
                children: 'children',
                label: 'typeName'
            },
            choose: false,
            selectedTypeId: 0,
            typeName: ""
        }
    },
    methods: {
        insert: function () {
            if (this.typeName === "") {
                alert("类别名称不能为空")
                return
            }
            if (this.selectedTypeId === null) {
                this.selectedTypeId = 0
            }
            axios({
                url: "/info/type/insert",
                params: {
                    parentId: this.selectedTypeId,
                    typeName: this.typeName,
                    kind: "支出"
                }
            }).then(rs => {
                console.log(rs)
                if (rs.data.code === 200) {
                    alert("新增成功")
                } else {
                    alert("类别已存在")
                }


            })
        },
        handleCheckChange(node, checked) {
            // 如果取消勾选，则不进行操作
            if (checked) {
                // 取消勾选其他所有节点
                const allCheckedNodes = this.$refs.tree.getCheckedNodes();
                allCheckedNodes.forEach((checkedNode) => {
                    if (checkedNode.typeId !== node.typeId) {
                        this.$refs.tree.setChecked(checkedNode, false);
                    }
                });
                // 设置当前勾选节点的 typeId
                this.selectedTypeId = node.typeId;
                console.log(this.selectedTypeId)
            } else {
                // 如果节点被取消勾选，重置 selectedTypeId
                this.selectedTypeId = null;
            }
        },
        // 用于初始化或重置 selectedTypeId
        resetChecked() {
            this.selectedTypeId = null;
            this.$refs.tree.setCheckedKeys([]);
        },
        buildTree(data) {
            const tree = [];
            const map = {};

            // 将所有节点添加到map中，方便后续查找
            data.forEach(item => {
                map[item.typeId] = { ...item, children: [] };
            });

            // 构建树形结构
            data.forEach(item => {
                if (item.parentId === 0) {
                    tree.push(map[item.typeId]);
                } else {
                    if (map[item.parentId]) {
                        map[item.parentId].children.push(map[item.typeId]);
                    }
                }
            });

            return tree;
        },
        searchPage: function () {
            this.axios({
                url: "/info/type/typeByPage",
                params: {
                    kind: "支出",
                    status: this.status
                }
            }).then(rs => {
                console.log(rs.data)
                this.pageInfo = rs.data.pageInfo
                this.treeData = this.buildTree(this.pageInfo);
                console.log(this.treeData)
            })
        },
    },
    created: function () {
        this.searchPage()
        this.resetChecked()
    }
}
</script>

<style scoped>
#addAccount {
    width: 100%;
    /* height: 250px; */
    /* overflow: scroll; */
    /* background-color: pink; */
}

#contact {
    width: 90%;
    margin: auto;
    border-collapse: collapse;
    color: #707276;
}

#contact th,
#contact td {
    border: 1px #c0c4cc solid;
    height: 35px;
    min-width: 30px;
}

p {
    color: #4b4a4a;
    font-size: 18px;

}

.el-input {
    width: 240px;
}

table td :not([id=contact]) {
    text-align: left;
    padding-right: 10px;
    /* padding-top: 10px;
    padding-bottom: 10px; */
}

td:nth-child(odd) {
    text-align: center;
    padding-right: 10px;
}
=======
<template>
    <div id="addAccount">
        <table>
            <br>
            <tr>
                <td>类别</td>
                <td><el-input v-model="typeName"></el-input></td>
            </tr>
            <br>
            <tr>
                <td></td>
                <td><el-button style="margin-left: 170px" type="primary" @click="insert()">新增</el-button></td>
            </tr>
        </table>
    </div>
</template>
<script>
import axios from 'axios';


export default {
    name: 'AddEmployee',
    data() {
        return {
            treeData: [],
            pageInfo: "",
            defaultProps: {
                children: 'children',
                label: 'typeName'
            },
            choose: false,
            selectedTypeId: 0,
            typeName: ""
        }
    },
    methods: {
        insert: function () {
            if (this.typeName === "") {
                alert("类别名称不能为空")
                return
            }
            if (this.selectedTypeId === null) {
                this.selectedTypeId = 0
            }
            axios({
                url: "/info/type/insert",
                params: {
                    parentId: this.selectedTypeId,
                    typeName: this.typeName,
                    kind: "支出"
                }
            }).then(rs => {
                console.log(rs)
                if (rs.data.code === 200) {
                    alert("新增成功")
                } else {
                    alert("类别已存在")
                }


            })
        },
        handleCheckChange(node, checked) {
            // 如果取消勾选，则不进行操作
            if (checked) {
                // 取消勾选其他所有节点
                const allCheckedNodes = this.$refs.tree.getCheckedNodes();
                allCheckedNodes.forEach((checkedNode) => {
                    if (checkedNode.typeId !== node.typeId) {
                        this.$refs.tree.setChecked(checkedNode, false);
                    }
                });
                // 设置当前勾选节点的 typeId
                this.selectedTypeId = node.typeId;
                console.log(this.selectedTypeId)
            } else {
                // 如果节点被取消勾选，重置 selectedTypeId
                this.selectedTypeId = null;
            }
        },
        // 用于初始化或重置 selectedTypeId
        resetChecked() {
            this.selectedTypeId = null;
            this.$refs.tree.setCheckedKeys([]);
        },
        buildTree(data) {
            const tree = [];
            const map = {};

            // 将所有节点添加到map中，方便后续查找
            data.forEach(item => {
                map[item.typeId] = { ...item, children: [] };
            });

            // 构建树形结构
            data.forEach(item => {
                if (item.parentId === 0) {
                    tree.push(map[item.typeId]);
                } else {
                    if (map[item.parentId]) {
                        map[item.parentId].children.push(map[item.typeId]);
                    }
                }
            });

            return tree;
        },
        searchPage: function () {
            this.axios({
                url: "/info/type/typeByPage",
                params: {
                    kind: "支出",
                    status: this.status
                }
            }).then(rs => {
                console.log(rs.data)
                this.pageInfo = rs.data.pageInfo
                this.treeData = this.buildTree(this.pageInfo);
                console.log(this.treeData)
            })
        },
    },
    created: function () {
        this.searchPage()
        this.resetChecked()
    }
}
</script>

<style scoped>
#addAccount {
    width: 100%;
    /* height: 250px; */
    /* overflow: scroll; */
    /* background-color: pink; */
}

#contact {
    width: 90%;
    margin: auto;
    border-collapse: collapse;
    color: #707276;
}

#contact th,
#contact td {
    border: 1px #c0c4cc solid;
    height: 35px;
    min-width: 30px;
}

p {
    color: #4b4a4a;
    font-size: 18px;

}

.el-input {
    width: 240px;
}

table td :not([id=contact]) {
    text-align: left;
    padding-right: 10px;
    /* padding-top: 10px;
    padding-bottom: 10px; */
}

td:nth-child(odd) {
    text-align: center;
    padding-right: 10px;
}
>>>>>>> 6be95d2b3200ab6fbb17d1e0a5a9b367f780cc8e
</style>